<template>
  <div class="me-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title" >我的订单</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>
    <div class="opt-group">
      <router-link to="/order/list/0" class="item flex flex-pack-justify border-bottom">
        <span>全部订单
          <!--<i class="num" v-show="orderTotal">{{orderTotal || 0 | numFilter }}</i>-->
        </span>
        <i class="icon icon-arrowright"></i></router-link>
      <router-link to="/order/list/1" class="item flex flex-pack-justify border-bottom">
        <span>未支付订单<i class="num" v-show="orderUnpaid">{{orderUnpaid || 0 | numFilter}}</i></span>
        <i class="icon icon-arrowright"></i></router-link>
      <router-link to="/order/list/2" class="item flex flex-pack-justify border-bottom">
        <span>已支付订单
          <!--<i class="num" v-show="orderAlreadyPaid">{{orderAlreadyPaid || 0 | numFilter}}</i>-->
        </span>
        <i class="icon icon-arrowright"></i></router-link>
      <router-link to="/order/list/3" class="item flex flex-pack-justify border-bottom">
        <span>已取消订单
          <!--<i class="num" v-show="orderCanceled">{{orderCanceled || 0 | numFilter}}</i>-->
        </span>
        <i class="icon icon-arrowright"></i></router-link>
      <router-link to="/order/list/4" class="item flex flex-pack-justify border-bottom">
        <span>已完成订单
          <!--<i class="num" v-show="orderCompleted">{{orderCompleted || 0 | numFilter}}</i>-->
        </span>
        <i class="icon icon-arrowright"></i></router-link>
    </div>
  </div>
</template>
<script>
    export default {
        props: {},
        data() {
            return {
              orderTotal: 0,
              orderUnpaid: 0,
              orderAlreadyPaid: 0,
              orderCanceled: 0,
              orderCompleted: 0,
            };
        },
        methods: {
          getOrderNum(){
            getOrderNum().then(data=>{
              if(data.returnCode == '000000'){
                  this.orderTotal = data.result.orderTotal;
                  this.orderUnpaid = data.result.orderUnpaid;
                  this.orderAlreadyPaid = data.result.orderAlreadyPaid;
                  this.orderCanceled = data.result.orderCanceled;
                  this.orderCompleted = data.result.orderCompleted;
              }
            })
          }
        },
        filters: {
            numFilter(num){
                if(num > 99){
                  return '99+';
                }else{
                  return num;
                }
            }
        },
        created() {
            this.getOrderNum();

        },
        mounted(){

        },
        components: {
        }
    };
</script>
<style lang="less">
  @import "./me.less";
</style>
